import { getAdminHouseholdDetailsApi } from '@/apis/household'
import { Col, Modal, Row } from 'antd'
import React, { useEffect, useState } from 'react'
import style from './index.module.css'

const titleList = [
  {
    title: '姓名',
    dataIndex: 'householdName',
  },
  {
    title: '性别',
    dataIndex: 'gender',
  },
  {
    title: '联系方式',
    dataIndex: 'phone',
  },
  {
    title: '地址',
    dataIndex: 'householdAddr',
  }
]

export default function ResidentDetailsModal({ isOpen, setIsOpen, hid, successChange }) {
  const [household, setHousehold] = useState({})
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setLoading(true)
    ; (async () => {
      const res = await getAdminHouseholdDetailsApi(hid)
      const resObj = await res.json()
      setHousehold({
        ...resObj,
        gender: resObj.gender === '1' ? '男' : '女'
      })
      setLoading(false)
    })()
  }, [hid, successChange])

  return (
    <Modal okText='确认' cancelText='取消' title='居民详情' open={isOpen} onOk={() => setIsOpen()} onCancel={() => setIsOpen()} loading={loading}>
      {titleList.map((item, index) => (
        <Row key={index} className={style['row-style']}>
          <Col span={8} className={style['title-style']}>{item.title}</Col>
          <Col span={16} className={style['data-style']}>{household[item.dataIndex]}</Col>
        </Row>
      ))}
    </Modal>
  )
}
